<template>
  <div>
    <el-container>
      <el-main>
        <el-row  style="margin-top: 10px">
          <el-col :span="2" style="font-weight: bold">姓名:</el-col>
          <el-col :span="2" style="color: #04599a">{{ stu_name }}</el-col>
          <el-col :span="2" style="font-weight: bold">学号:</el-col>
          <el-col :span="3" style="color: #04599a">{{ stu_no }}</el-col>
          <el-col :span="2" style="font-weight: bold">班级:</el-col>
          <el-col :span="3" style="color: #04599a">{{ stu_class }}</el-col>
          <el-col :span="9"><el-button type="text" icon="el-icon-back" @click="back" style="float:right">返回</el-button></el-col>
        </el-row>
      </el-main>
    </el-container>

    <el-dialog title="作业信息" :visible.sync="detail">
      <el-row  style="margin-top: 10px">
        <el-col :span="2" style="font-weight: bold">题目:</el-col>
        <el-col :span="21" style="color: #04599a">{{ zuoweninfo.title }}</el-col>
      </el-row>
      <el-row  style="margin-top: 10px">
        <el-col :span="2" style="font-weight: bold">要求:</el-col>
        <el-col :span="21" style="color: #04599a">{{ zuoweninfo.requirement }}</el-col>
      </el-row>
      <el-row  style="margin-top: 10px">
        <el-col :span="2" style="font-weight: bold">提示:</el-col>
        <el-col :span="21" style="color: #04599a">{{ zuoweninfo.tips }}</el-col>
      </el-row>
      <el-row  style="margin-top: 10px">
        <el-col :span="2" style="font-weight: bold">关键词:</el-col>
        <el-col :span="21" style="color: #04599a">{{ zuoweninfo.keys }}</el-col>
      </el-row>
      <el-row  style="margin-top: 10px">
        <el-col :span="2" style="font-weight: bold">体裁:</el-col>
        <el-col :span="21" style="color: #04599a">{{ zuoweninfo.theme }}</el-col>
      </el-row>
      <el-row  style="margin-top: 10px">
        <el-col :span="4" style="font-weight: bold">学生水平:</el-col>
        <el-col :span="4" style="color: #04599a">{{ zuoweninfo.studentlever }}</el-col>
        <el-col :span="4" style="font-weight: bold">学习者水平:</el-col>
        <el-col :span="4" style="color: #04599a">{{ zuoweninfo.learnerlevel }}</el-col>
      </el-row>
      <el-row  style="margin-top: 10px">
        <el-col :span="4" style="font-weight: bold">一级主题:</el-col>
        <el-col :span="4" style="color: #04599a">{{ zuoweninfo.primarytheme }}</el-col>
        <el-col :span="4" style="font-weight: bold">二级主题:</el-col>
        <el-col :span="4" style="color: #04599a">{{ zuoweninfo.secondarytheme }}</el-col>
        <el-col :span="4" style="font-weight: bold">三级主题:</el-col>
        <el-col :span="4" style="color: #04599a">{{ zuoweninfo.threeleveltheme }}</el-col>
      </el-row>
      <el-row  style="margin-top: 10px">
        <el-col :span="4" style="font-weight: bold">写作限时:</el-col>
        <el-col :span="4" style="color: #04599a">{{ zuoweninfo.time }}</el-col>
        <el-col :span="4" style="font-weight: bold">字数要求:</el-col>
        <el-col :span="4" style="color: #04599a">{{ zuoweninfo.wordnum }}</el-col>
      </el-row>
    </el-dialog>
    <el-container>
      <el-container>
        <el-main style="background-color: #D3DCE6;color: #333;height: 200px;width: 70%;margin-left: 20px;border-radius:5px">
          <div style="font-weight: bold;margin-left: 10px;margin-top: 10px;font-size: x-large">
            {{ zuoweninfo.title }}
            <el-button @click="detail = true" type="text" style="float:right">详细信息</el-button>
          </div>
          <div style="margin-left: 10px;display: flex;margin-top: 15px">
            <div style="margin-left: 10px;font-weight: bold;">要求：</div>
            <div style="width: 90%">{{ zuoweninfo.requirement }}</div>
          </div>
          <div style="margin-left: 10px;display: flex;margin-top: 10px">
            <div style="margin-left: 10px;font-weight: bold;">提示：</div>
            <div style="width: 90%">{{ zuoweninfo.tips }}</div>
          </div>
          <div style="margin-bottom: 10px"></div>
        </el-main>
        <el-col :span="1"></el-col>
        <el-main style="border-style:solid;border-width:1px;border-radius:5px;margin-right: 20px;border-color:#adb496;">
          <div style="margin-top: 10px;">
            <el-row >
              <el-col :span="12" >智能评测推荐得分：</el-col>
              <el-col :span="12" style="color: red">{{ AI_score.total_score }}</el-col>
            </el-row>
          </div>
          <div style="margin-top: 20px">
            <el-row >
              <el-col :span="7" >打分：</el-col>
              <el-col :span="12"><el-input v-model="t_score" placeholder="请输入分数 （0-100）" ></el-input></el-col>
            </el-row>
          </div>
          <div style="margin-top: 20px">
            <el-button type="success" @click="submit_score">提交</el-button>
            <el-button type="danger" style="margin-left: 60px">打回重做</el-button>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <div style="width: 100%;display: flex;flex-direction: row;margin-top: 20px">
      <div style="margin-left: 20px;width: 60%">智能评测报告：
        <el-tabs type="border-card" style="width: 100%;margin-top: 10px">
          <el-tab-pane label="原文点评">
            <el-container direction="vertical" style="height: 500px">
              <el-main>
                <div v-for="(item, index) in ywdp.commentsOriginalText" class="wenben">
                  <template v-if="item.para_split.length == 0">
                    <div class="wenben" v-text="item.para"></div>
                  </template>
                  <template v-else>
                    <template v-for="(pro, index) in item.para_split" >
                      <div v-if="pro.type=='normal'" style="color:black;margin:0" v-text="pro.sentence"></div>
                      <div v-if="pro.type=='idiom'"  style="color:green;margin:0;text-decoration:underline;" v-text="pro.sentence"></div>
                      <div v-if="pro.type=='famous_saying'" style="color:red;margin:0;text-decoration:underline;" v-text="pro.sentence"></div>
                    </template>
                  </template>
                  <p class='comment' style="margin-top:15px;margin: 20px 10px 25px 10px;">{{item.comment}}</p>
                </div>
              </el-main>
            </el-container>
          </el-tab-pane>
          <el-tab-pane label="提升建议">
            <el-container direction="vertical" style="height: 500px">
              <el-main>
                <div v-for="(item, index) in tsjy.suggestions" >
                  <div style="font-weight:bold;font-family: 黑体;font-size: large">第{{item.paraID+1}}段</div>
                  <template v-if="item.para_split.length == 0">
                    <div style="margin-top:10px;margin: 10px 10px 15px 10px;text-indent:35px;" class='wenben'>{{item.para}}</div>
                  </template>
                  <template v-else>
                    <div style="margin-top:10px;margin: 10px 10px 15px 10px;text-indent:35px;">
                      <template v-for="(pro, index) in item.para_split" >
                        <div v-if="pro.type=='normal'" style="color:black;margin:0" class='wenben'>{{pro.sentence}}</div>
                        <template v-if="pro.type=='wrong_word'">
                          <div style="margin:0;color:#FA5858">[{{pro.id+1}}]{{pro.sentence}}</div>
                        </template>
                      </template>
                    </div>
                  </template>
                  <div>
                    <div v-for="(item, index) in item.wrong_word" >
                      <el-row>
                        <el-col :span="5" style="color:#FFBF00;font-family: 楷体;font-size: large;">【需斟酌处{{index+1}}】</el-col>
                        <el-col :span="15" style="font-family: 楷体;font-size: large;">发现待斟酌处[{{item.wrong_word}}] :</el-col>
                      </el-row>
                      <el-row>
                        <el-col :offset="5" style="font-family: 楷体;font-size: large;">建议用“{{item.correct_word}}”替换“{{item.wrong_word}}”</el-col>
                      </el-row>
                      <div style="height:10px"></div>
                    </div>
                  </div>
                  <div>
                    <div v-for="(item, index) in item.wrong_grammar.redundancy" >
                      <el-row>
                        <el-col :span="5" style="color:#FFBF00;font-family: 楷体;font-size: large;">【需斟酌处{{index+1}}】</el-col>
                        <el-col :span="15" style="font-family: 楷体;font-size: large;">发现待斟酌处[{{item.wrong}}] :</el-col>
                      </el-row>
                      <el-row>
                        <el-col :offset="5" style="font-family: 楷体;font-size: large;">建议用“{{item.correct}}”替换“{{item.wrong}}”</el-col>
                      </el-row>
                      <div style="height:10px"></div>
                    </div>
                  </div>
                </div>
              </el-main>
            </el-container>
          </el-tab-pane>
          <el-tab-pane label="拓展学习">
            <el-container direction="vertical" style="height: 500px">
              <main>
                <el-card class="box-card" v-for="(item, index) in tzxx.famous_saying">
                  <div slot="header" class="clearfix">
                    <span style="color: #20a0ff">文章出现的名言警句：</span>
                  </div>
                  <div style="color: #9adc33">{{item.saying}} ————{{item.author}}({{item.period}})</div>
                </el-card>
                <el-card class="box-card" v-for="(item, index) in tzxx.hot_words">
                  <div slot="header" class="clearfix">
                    <span style="color: #20a0ff">文章融入的热词：</span>
                  </div>
                  <div style="color: #9adc33">{{item.hot_word}} : {{item.explain}}</div>
                </el-card>
                <el-card class="box-card" v-for="(item, index) in tzxx.idioms">
                  <div slot="header" class="clearfix">
                    <span style="color: #20a0ff">文章出现的成语[{{item.idiom}}]</span>
                  </div>
                  <div style="color: #9adc33">解释 : {{item.explain}}</div>
                </el-card>
              </main>
            </el-container>
          </el-tab-pane>
        </el-tabs>
      </div>
      <el-col :span="1"></el-col>
      <div style="width: 34%;margin-right: 20px;">老师评阅：
        <el-tabs type="border-card" style="width: 100%;margin-top: 10px">
          <el-tab-pane label="原文点评">
            <el-container direction="vertical" style="height: 500px">
              <main>
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 5, maxRows: 20}"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="t_remark.t_ywdp">
                </el-input>
              </main>
              <el-footer style="margin-top: 15px">
                <el-row>
                  <el-button type="primary" @click="save_remark" plain>保存点评</el-button>
                  <el-button type="warning" @click="reset_ywdp" plain>重置文本</el-button>
                </el-row>
              </el-footer>
            </el-container>
          </el-tab-pane>
          <el-tab-pane label="提升建议">
            <el-container direction="vertical" style="height: 500px">
              <main>
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 5, maxRows: 20}"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="t_remark.t_tsjy">
                </el-input>
              </main>
              <el-footer style="margin-top: 15px">
                <el-row>
                  <el-button type="primary" @click="save_remark" plain>保存点评</el-button>
                  <el-button type="warning" @click="reset_tsjy" plain>重置文本</el-button>
                </el-row>
              </el-footer>
            </el-container>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
<!--    <el-container style="margin-top: 20px">-->
<!--      <el-aside width="60%" style="height: 600px;margin-left: 20px;">-->
<!--        <div style="font-weight: bold">智能评测报告：</div>-->

<!--      </el-aside>-->
<!--      <el-col :span="1"></el-col>-->
<!--      <el-aside  width="34%" style="margin-right: 20px;">-->
<!--        <div style="font-weight: bold">老师评阅：</div>-->
<!--        <div style="border-style:solid;border-width:1px;border-radius:5px;border-color:#c6c9bb;height: 550px;margin-top: 10px">-->
<!--        </div>-->
<!--      </el-aside>-->
<!--    </el-container>-->
    <el-container>
      <el-aside style="height: 50px"></el-aside>
    </el-container>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import { BaaS } from '@/api/user'
import axios from 'axios'
import qs from 'qs'
import dayjs from 'dayjs'
Vue.prototype.$axios = axios    //全局注册，使用方法为:this.$axios
Vue.prototype.$qs = qs           //全局注册，使用方法为:this.qs

var baas = BaaS()

export default {
  data() {
    return {
      detail: false,
      stu_name: null,
      stu_no: null,
      stu_class: null,
      zuoweninfo: null,
      zwzy: null,
      t_score: null, //老师打分
      AI_score: null,
      ywdp: null, //原文点评
      tsjy: null, //提升建议
      tzxx: null, //拓展学习
      t_remark: {
        t_ywdp: null, //原文点评老师评语
        t_tsjy: null  //提示建议老师评语
      }
    }
  },
  computed: {
    ...mapGetters([
      'currentUser'
    ])
  },
  created() {
    this.get_stuinfo()
    //this.getParams()
    this.get_zuoweninfo()
  },
  mounted() {
    //this.get_zwzyinfo()
  },
  watch: {
    zuoweninfo: function(newVal) {
      this.get_zwzyinfo()
    }
  },
  methods: {
    back() {
      // this.$router.go(-1)
      var BaaS = require('minapp-sdk')
      BaaS.init(baas)
      var Product = new BaaS.TableObject('zuowenzuoye')
      Product.get(this.$route.query.zwzy_ID).then(res => {
        if (res.data.chengjiFIN != null) {
          var Product = new BaaS.TableObject('zuowenzuoye')
          var product = Product.getWithoutData(this.$route.query.zwzy_ID)
          product.set('isscore', true)
          product.update()
          this.$router.go(-1)
        } else {
          this.$router.go(-1)
        }
      })
    },
    get_stuinfo() { //获取学生信息
      var BaaS = require('minapp-sdk')
      BaaS.init(baas)
      var Product = new BaaS.TableObject('student')
      Product.get(this.$route.query.stu_ID).then(res => {
        // success
        this.stu_name = res.data.stu_name
        this.stu_no = res.data.stu_no
      }, err => {
        // err
      })
      var query = new BaaS.Query()
      query.compare('user_id', '=', this.$route.query.stu_ID)
      var zwb = new BaaS.TableObject('zuowenban')
      zwb.setQuery(query).find().then(res => {
        // success
        this.stu_class = res.data.objects[0].class_name
      }, err => {
        // err
        console.log(err)
      })
    },
    get_zuoweninfo() {
      console.log(this.$route.query.zuowenID)
      var BaaS = require('minapp-sdk')
      BaaS.init(baas)
      var Product = new BaaS.TableObject('zuowenku')
      Product.get(this.$route.query.zuowenID).then(res => {
        // success
        this.zuoweninfo = res.data
      }, err => {
        // err
      })
    },
    get_zwzyinfo() {  //获取作业信息
      const loadingObj = this.$loading({
        lock: true,
        text: '正在生成智能评测报告，请稍等...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
        target: document.querySelector('.submit-test-dialog')
      })
      console.log(this.zuoweninfo)
      var BaaS = require('minapp-sdk')
      BaaS.init(baas)
      var Product = new BaaS.TableObject('zuowenzuoye')
      Product.get(this.$route.query.zwzy_ID).then(res => {
        // success
        this.zwzy = res.data
        this.t_remark = res.data.remark
        console.log(res.data.content)
        this.$axios({
          method: 'post',
          url: 'http://106.52.142.195:5007/scoreModule/item_score', //评分
          data: this.$qs.stringify({    //这里是发送给后台的数据
            text: res.data.content,
            title: this.zuoweninfo.title,
            student_level: '无', //this.zuoweninfo.studentlever,
            learner_level: this.zuoweninfo.learnerlevel,
            words_num: 200, //this.zuoweninfo.wordnum,
            tips: this.zuoweninfo.tips,
            article_type: this.zuoweninfo.theme,
            primary_theme: '无', //this.zuoweninfo.primarytheme,
            secondary_theme: '无', //this.zuoweninfo.secondarytheme,
            key_words: 100
          })
        }).then((res) => {          //这里使用了ES6的语法
          //console.log(res.data)       //请求成功返回的数据
          this.AI_score = res.data
          var Product = new BaaS.TableObject('zuowenzuoye')
          var product = Product.getWithoutData(this.$route.query.zwzy_ID)
          product.set('score_AI', res.data)
          product.update()
          loadingObj.close()  //结束加载
        }).catch((error) => {
          console.log(error)       //请求失败返回的数据
        })
        this.$axios({
          method: 'post',
          url: 'http://106.52.142.195:5004/testModule/commentsOriginalText', //原文点评
          data: this.$qs.stringify({    //这里是发送给后台的数据
            text: res.data.content,
            title: this.zuoweninfo.title
          })
        }).then((res) => {          //这里使用了ES6的语法
          console.log(res.data)       //请求成功返回的数据
          this.ywdp = res.data
          var Product = new BaaS.TableObject('zuowenzuoye')
          var product = Product.getWithoutData(this.$route.query.zwzy_ID)
          product.set('report_ywdp', res.data)
          product.update()
        }).catch((error) => {
          console.log(error)       //请求失败返回的数据
        })
        this.$axios({
          method: 'post',
          url: 'http://106.52.142.195:5004/testModule/suggestionImprove', //提升建议
          data: this.$qs.stringify({    //这里是发送给后台的数据
            text: res.data.content,
            title: this.zuoweninfo.title
          })
        }).then((res) => {          //这里使用了ES6的语法
          console.log(res.data)       //请求成功返回的数据
          this.tsjy = res.data
          var Product = new BaaS.TableObject('zuowenzuoye')
          var product = Product.getWithoutData(this.$route.query.zwzy_ID)
          product.set('report_tsjy', res.data)
          product.update()
        }).catch((error) => {
          console.log(error)       //请求失败返回的数据
        })
        this.$axios({
          method: 'post',
          url: 'http://106.52.142.195:5004/testModule/extendedLearning', //拓展学习
          data: this.$qs.stringify({    //这里是发送给后台的数据
            text: res.data.content,
            title: this.zuoweninfo.title
          })
        }).then((res) => {          //这里使用了ES6的语法
          console.log(res.data)       //请求成功返回的数据
          this.tzxx = res.data
          var Product = new BaaS.TableObject('zuowenzuoye')
          var product = Product.getWithoutData(this.$route.query.zwzy_ID)
          product.set('report_tzxx', res.data)
          product.update()
        }).catch((error) => {
          console.log(error)       //请求失败返回的数据
        })
      }, err => {
        // err
      })
    },
    getParams() {  //获取上个页面数据

    },
    save_remark() {
      var BaaS = require('minapp-sdk')
      BaaS.init(baas)
      var Product = new BaaS.TableObject('zuowenzuoye')
      var product = Product.getWithoutData(this.$route.query.zwzy_ID)
      product.set('remark', this.t_remark)
      product.update()
      this.$message({
        message: '保存成功',
        type: 'success'
      })
    },
    reset_ywdp() {
      this.t_remark.t_ywdp = null
      this.$message({
        message: '重置成功',
        type: 'success'
      })
    },
    reset_tsjy() {
      this.t_remark.t_tsjy = null
      this.$message({
        message: '重置成功',
        type: 'success'
      })
    },
    submit_score() {
      var BaaS = require('minapp-sdk')
      BaaS.init(baas)
      this.$confirm('确定要将该分数作文此同学的最终成绩吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var reg = /^[0-9]+.?[0-9]*$/
        if (reg.test(this.t_score) && this.t_score >= 0 && this.t_score <= 100) {
          var Product = new BaaS.TableObject('zuowenzuoye')
          var product = Product.getWithoutData(this.$route.query.zwzy_ID)
          product.set('chengjiFIN', this.t_score)
          product.update()
          this.$message({
            message: '打分成功',
            type: 'success'
          })
        } else {
          this.$message.error('打分失败！请输入0——100范围内的数字')
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消打分'
        })
      })
    }
    // AIreport() {
    //   var report
    //   if (report == null) {
    //     this.$notify({
    //       title: '提示',
    //       message: '这是一条不会自动关闭的消息',
    //       duration: 0
    //     })
    //   }
    //
    //
    // }
  }
}
</script>

<style>
.left{
  width:400px;
  margin-left: 20px;
  float:left;
}
.right{
  width:670px;
  float:right;
  margin-right: 20px;
}
.el-scrollbar__wrap {
  overflow-x: hidden;
}
.wenben{
  font-family: 宋体;
  font-size: large;
  text-indent:35px;
}
.text-wrapper {
  white-space: pre-wrap;
}
.comment{
  font-family: Kaiti;
  color:red;
  user-select: text;
}
</style>
